<template>
	<div v-loading="loginShow">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="1">
				<router-link to='/admin/index'>首页</router-link>
			</el-menu-item>
			<el-menu-item index="2">
				<router-link to='/admin/user_list'>用户管理</router-link>
			</el-menu-item>
			<el-submenu index="3">
				<template slot="title">分类管理</template>
				<el-menu-item index="3-1">
					<router-link to='/admin/category'>分类首页</router-link>
				</el-menu-item>
				<el-menu-item index="3-2">
					<router-link to='/admin/categoryAdd'>分类添加</router-link>
				</el-menu-item>
			</el-submenu>
			<el-submenu index="4">
				<template slot="title">内容管理</template>
				<el-menu-item index="4-1">
					<router-link to='/admin/blog_list'>内容首页</router-link>
				</el-menu-item>
				<el-menu-item index="4-2">
					<router-link to='/admin/blog_add'>内容添加</router-link>
				</el-menu-item>
			</el-submenu>
		</el-menu>
		<el-main>
			<transition name="el-zoom-in-center" mode="out-in">                
				<router-view></router-view>
			</transition>  
		</el-main>
	</div>

</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      loginShow: false
    };
  },
  created() {},
  mounted() {},
  components: {},
  computed: {
    task() {
      return this.$store.state.userInfo;
    }
  },
  watch: {
    task: {
      deep: true,
      handler(val) {
        // 由于是异步载入，所以只能在状态值的变化时执行渲染操作
        // 绝不可在mounted中执行render方法
        //  this.render(val)
        console.log(val);
        // this.loginShow = val.admin ? false : true;
        this.loginShow = false;
      }
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
